<template>
  <!-- 核酸查询页面 -->
  <view id="nucleic-acid-query">
    <view class="search-box">
      <view class="select-city" @click="isShowPicker = true">{{
        showKeyword
      }}</view>
      <view class="search-bar"
        ><u-search
          animation
          placeholder="请输入搜索的地区"
          v-model="keyword"
          @search="searchCityKeyword"
          @custom="searchCityKeyword"
        ></u-search
      ></view>
    </view>

    <view class="main-box">
      <!-- 加载 -->
      <u-loading-icon
        text="加载中"
        textSize="18"
        v-if="loading"
      ></u-loading-icon>

      <!-- 核酸信息列表 -->
      <view
        class="nucle-acid-list"
        v-if="nucleAcidInfos.length > 0 && loading == false"
      >
        <NucleicAcidItem
          class="item"
          :itemData="item"
          v-for="item in nucleAcidInfos"
          :key="item.id"
        />
      </view>
      <!-- 没有结果 -->
      <u-empty
        mode="search"
        icon="/static/images/Empty/nullData.png"
        v-if="nucleAcidInfos.length == 0 && loading == false"
      >
      </u-empty>
    </view>
    <!-- 地区选择器 -->
    <u-picker
      ref="uPicker"
      :show="isShowPicker"
      :columns="columns"
      @confirm="confirmPicker"
      @change="changeHandler"
      @cancel="isShowPicker = false"
      keyName="name"
    ></u-picker>

    <!-- 弹出面板 -->
    <!-- <view class="map-panel">
      <view class="mini">
        <div class="mini-header">地图导航</div>
        地图
        <map id="map1" ref="map1"></map>
      </view>
    </view> -->
  </view>
</template>

<script>
import { mapState } from "vuex";
import NucleicAcidItem from "./components/nucleicAcidItem";
export default {
  name: "NucleicAcidQuery",
  components: { NucleicAcidItem },
  data() {
    return {
      columns: [],
      // 省
      provinceArray: [],
      // 城市
      cityArray: [],
      // 地区
      areaArray: [],
      // 是否展示选择器
      isShowPicker: false,

      // 选中的省份
      selectProvince: 0,

      // 搜索关键字
      keyword: "",

      // 选择展示关键词
      showKeyword: "选择区域",

      // 经纬度
      latitude:0,
      longitude:0
    };
  },
  mounted() {
    this.$store.dispatch("cityMenu");

    // uni.getLocation({
    //   type: "gcj02", // <map> 组件默认为国测局坐标gcj02
    //   altitude: true,
    //   geocode:true,
    //   success(res) {
    //     console.log("返回的位置信息", res);
    //   },
    // });
  },
  computed: {
    ...mapState({
      cityMenu: (store) => store.nucleicAcid.cityMenu,
      nucleAcidInfos: (store) => store.nucleicAcid.nucleAcidInfos,
      loading: (store) => store.nucleicAcid.loading,
    }),
  },
  watch: {
    cityMenu(newValue) {
      newValue.provinceArray.forEach((item) => {
        this.provinceArray.push(item.name);
      });
      this.cityArray = newValue.provinceArray[0].children.columns;
      this.areaArray = newValue.provinceArray[0].children.children[0].children;
      this.columns[0] = this.provinceArray;
      this.columns[1] = this.cityArray;
      this.columns[2] = this.areaArray;
    },
  },

  methods: {
    // picker修改项回调
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        // console.log(this.cityArray[index]);
        picker.setColumnValues(
          1,
          this.cityMenu.provinceArray[index].children.columns
        );
        picker.setColumnValues(
          2,
          this.cityMenu.provinceArray[index].children.children[0].children
        );
        this.selectProvince = index;
      } else if (columnIndex === 1) {
        // console.log(this.areaArray[index]);
        picker.setColumnValues(
          2,
          this.cityMenu.provinceArray[this.selectProvince].children.children[
            index
          ].children
        );
      }
    },

    // 确认修改picker
    confirmPicker(e) {
      this.isShowPicker = false;
      // 判断是否有选择第三级
      if (e.value[2] === "全部") {
        this.showKeyword = e.value[1];
      } else {
        this.showKeyword = e.value[2];
      }
      // 调用搜索
      this.searchCity(this.showKeyword);
    },

    // 关键词搜索
    searchCityKeyword(value) {
      if (value != "") {
        this.searchCity(value);
        this.showKeyword = this.keyword;
      }
    },

    // 搜素
    searchCity(city) {
      this.$store.dispatch("nucleAcidInfos", city);
    },

    // 获取位置信息
    getLocation() {
      let that = this;
      // 获取用户是否开启 授权获取当前的地理位置、速度的权限。
      uni.getSetting({
        success(res) {
          console.log(res);

          // 如果没有授权
          if (!res.authSetting["scope.userLocation"]) {
            // 则拉起授权窗口
            uni.authorize({
              scope: "scope.userLocation",
              success() {
                //点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
                uni.getLocation({
                  type: "wgs84",
                  success: function (res) {
                    that.x = res.longitude;
                    that.y = res.latitude;
                    console.log(res);
                    console.log("当前位置的经度：" + res.longitude);
                    console.log("当前位置的纬度：" + res.latitude);
                    uni.showToast({
                      title:
                        "当前位置的经纬度：" +
                        res.longitude +
                        "," +
                        res.latitude,
                      icon: "success",
                      mask: true,
                    });
                  },
                  fail(error) {
                    console.log("失败", error);
                  },
                });
              },
              fail(error) {
                //点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
                console.log("拒绝授权", error);

                uni.showModal({
                  title: "提示",
                  content: "若点击不授权，将无法使用位置功能",
                  cancelText: "不授权",
                  cancelColor: "#999",
                  confirmText: "授权",
                  confirmColor: "#f94218",
                  success(res) {
                    console.log(res);
                    if (res.confirm) {
                      // 选择弹框内授权
                      uni.openSetting({
                        success(res) {
                          console.log(res.authSetting);
                        },
                      });
                    } else if (res.cancel) {
                      // 选择弹框内 不授权
                      console.log("用户点击不授权");
                    }
                  },
                });
              },
            });
          } else {
            // 有权限则直接获取
            uni.getLocation({
              type: "wgs84",
              success: function (res) {
                that.x = res.longitude;
                that.y = res.latitude;
                console.log(res);
                console.log("当前位置的经度：" + res.longitude);
                console.log("当前位置的纬度：" + res.latitude);
                uni.showToast({
                  title:
                    "当前位置的经纬度：" + res.longitude + "," + res.latitude,
                  icon: "success",
                  mask: true,
                });
              },
              fail(error) {
                uni.showToast({
                  title: "请勿频繁调用！",
                  icon: "none",
                });
                console.log("失败", error);
              },
            });
          }
        },
      });
    },

   
  },

  components: {},
};
</script>

<style lang='scss' scoped>
#nucleic-acid-query {
  padding: 40rpx;
  .search-box {
    display: flex;
    align-items: center;
    .select-city {
      font-size: 28rpx;
      margin-right: 20rpx;
      white-space: nowrap;
    }
  }

  .main-box {
    padding-top: 30rpx;
    .nucle-acid-list {
      .item {
        margin-bottom: 30rpx;
        display: block;
      }
    }
  }

  .map-panel {
    position: fixed;
    background: rgba(0, 0, 0, 0.2);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    .mini {
      position: absolute;
      top: 60rpx;
      right: 0;
      left: 0;
      bottom: 0;
      background: #fff;
      border-radius: 40rpx;
      .mini-header{
        text-align: center;
        margin-top: 30rpx;
        font-size: 30rpx;
        font-weight: bold;
      }
    }
  }
}
</style>